<template>
	<view class="container">
		<navView navTitle="客户列表" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>
		<!-- 表单部分 -->
		<form @submit="submitForm">
			<!-- 客户信息 -->
			<view class="form-group">
				<label>客户名称</label>
				<input type="text" v-model="formData.customer.name" placeholder="请输入"
					placeholder-class="input-placeholder" />
			</view>
			<view class="form-group">
				<label>地址</label>
				<input type="text" v-model="formData.customer.address" placeholder="请输入"
					placeholder-class="input-placeholder" />
			</view>
			<!-- <view class="form-group">
				<label>联系人</label>
				<input type="text" v-model="formData.mobile" placeholder="请输入"
					placeholder-class="input-placeholder" />
			</view> -->
			<view class="form-group">
				<label>联系电话</label>
				<input type="text" v-model="formData.customer.mobile" placeholder="请输入"
					placeholder-class="input-placeholder" />
			</view>
			<view class="form-group">
				<label>状态</label>
				<picker mode="selector" :range="statusOptions" @change="selectStatus">
					<view class="picker-placeholder">{{ formData.customer.follow || '请选择' }}
						<uni-icons type="right" color="#C3C3C3" size="24rpx"></uni-icons>
					</view>
				</picker>
			</view>
			<!-- <view class="form-group">
				<label>成交项目</label>
				<picker mode="selector" :range="projectOptions" @change="selectProject">
					<view class="picker-placeholder">{{ formData.dealProject || '请选择' }}
						<uni-icons type="right" color="#C3C3C3" size="24rpx"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="form-group">
				<label>意向项目</label>
				<picker mode="selector" :range="projectOptions" @change="selectProject">
					<view class="picker-placeholder">{{ formData.intentionProject || '请选择' }}
						<uni-icons type="right" color="#C3C3C3" size="24rpx"></uni-icons>
					</view>
				</picker>
			</view> -->
			<view class="form-group" @tap="selectLevel">
				<label>意向程度</label>
				<!-- <picker mode="selector" :range="levelOptions" > -->
				<view class="picker-placeholder">{{ formData.customer.level + '级' || '请选择' }}
					<uni-icons type="right" color="#C3C3C3" size="24rpx"></uni-icons>
				</view>
				<!-- </picker> -->
			</view>

			<!-- 基本信息 -->
			<view class="form-group" style="border:0">
				<label>基本信息</label>
				<view class="textarea">
					<textarea v-model="formData.customer.info" placeholder="请输入" maxlength="50"
						@input="trackCharacterCount"></textarea>
					<view class="character-count">{{ characterCount }}/50</view>
				</view>
			</view>

			<!-- 追加记录 -->
			<view class="form-group">
				<label class="label">
					跟进记录
					<view class="add" @click="addFollowRecord">+添加</view>
				</label>
				<!-- <view class="phone-box" v-for="(record, index) in formData.followRecords" :key="index">
					<view class="follow-record">
						<view class="label">
							通话时间
							<uni-icons type="trash-filled" color="#ff0000" @tap="close(index)"></uni-icons>
						</view>
						<uni-datetime-picker v-model="record.callTime" type="datetimerange" rangeSeparator="至">
							<view class="picker-placeholder">
								{{ record.callTime || '请选择时间' }}
								<uni-icons type="right" color="#C3C3C3" size="24rpx"></uni-icons>
							</view>
						</uni-datetime-picker>
					</view>
				</view> -->

			</view>
			<view class="form-group" style="border:0">
				<label>基本内容</label>
				<view class="textarea">
					<textarea v-model="formData.customer.content" placeholder="请输入" maxlength="50"
						@input="trackCharacterCount"></textarea>
				</view>
			</view>
			<!-- 提交按钮 -->
			<button class="submit-btn" formType="submit">提交</button>
		</form>
		<view class="block" v-if="is_show"></view>
		<view class="props" v-if="is_show">
			<view class="title">
				意向程度
			</view>
			<view class="xingList">
				<view class="item" v-for="(item,index) in xingList" :key="index" @tap="toggleChecked(index)">
					<image
						:src="item.checked ? 'https://hfd.bjlzkj.com/static/user/xing.png':'https://hfd.bjlzkj.com/static/user/xin.png'"
						mode=""></image>
				</view>
			</view>
			<button @tap="que">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					customer: {
						name: '',
						address: '',
						mobile: '',
						follow: '',
						level: 0,
						content: '',
					},
					is_event: 1,
					// followRecords: [{
					// 	callTime: '',
					// 	content: "初步需求沟通",
					// 	type: "电话回访",
					// }],
					record: {
						content: '初步需求沟通',
						type: '电话回访'
					}
				},
				statusOptions: ["初次接触", "正在跟进", "准备购买", "准备付款", "已经购买", "暂时搁置"],
				projectOptions: ['项目A', '项目B', '项目C'],
				characterCount: 0, // 基本信息输入的字数统计
				xingList: [{
					checked: false,
				}, {
					checked: false
				}, {
					checked: false
				}, {
					checked: false
				}, {
					checked: false
				}],
				is_show: false
			};
		},
		methods: {
			// 提交表单
			submitForm() {
				console.log('表单数据:', this.formData);
				this.$request('/addons/qingdong/customer/addCustomer', 'POST', this.formData).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1200)
					}
				})
			},
			// 选择状态
			selectStatus(e) {
				this.formData.customer.follow = this.statusOptions[e.detail.value];
			},
			// 选择成交项目
			selectProject(e) {
				this.formData.customer.dealProject = this.projectOptions[e.detail.value];
			},
			// 选择意向项目
			selectProject(e) {
				this.formData.customer.intentionProject = this.projectOptions[e.detail.value];
			},
			// 选择意向程度
			selectLevel(e) {
				this.is_show = true
				// this.formData.intentionLevel = this.levelOptions[e.detail.value];
			},
			// 选择通话时间
			selectCallTime(record) {
				this.setData({
					[`formData.followRecords[${record.index}].callTime`]: e.detail.value,
				});
			},
			// 添加跟进记录
			addFollowRecord() {
				this.formData.followRecords.push({
					callTime: '',
					content: "初步需求沟通",
					type: "电话回访",
				});
			},
			close(ind) {
				this.formData.followRecords.splice(ind, 1)
			},
			// 跟踪基本信息输入的字数
			trackCharacterCount(e) {
				this.characterCount = e.detail.value.length;
			},
			toggleChecked(index) {
				// 遍历数组，将下标小于点击元素下标的项的checked属性设为true
				this.xingList.forEach((item, i) => {
					if (i <= index) {
						item.checked = true;
					} else {
						item.checked = false;
					}
				});
			},
			que() {
				this.is_show = false
				const countTrue = this.xingList.reduce((accumulator, current) => {
					return current.checked ? accumulator + 1 : accumulator;
				}, 0);
				console.log(countTrue); // 输出结果
				this.formData.customer.level = countTrue
			}
		},
	};
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
	}

	.form-group {
		margin-bottom: 20rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1px solid #E9E9E9;
		flex-wrap: wrap;

		input {
			text-align: right;
		}

		.textarea {
			width: 100%;
			position: relative;
			height: 263rpx;
			margin-top: 20rpx;

			textarea {
				width: 100%;
				height: 263rpx;
				background: #FBFBFB;
				padding: 15rpx;
				box-sizing: border-box;
				font-weight: 400;
				font-size: 26rpx;
			}

			.character-count {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
			}

		}
	}

	label {
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}

	.label {
		width: 100%;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.add {
			font-weight: 400;
			font-size: 30rpx;
			color: #008EFE;
		}
	}

	.phone-box {
		width: 100%;
		margin-top: 20rpx;
	}

	.picker-placeholder {
		font-weight: 400;
		font-size: 30rpx;
		color: #999999;

		.uni-icons {
			margin-left: 20rpx;
		}
	}

	.input-placeholder {
		font-weight: 400;
		font-size: 30rpx;
		color: #999999;
	}

	.follow-record {
		margin-bottom: 10rpx;
	}

	.submit-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #1890ff;
		color: white;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
	}

	.block {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.props {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		background: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #e2eee2;
		}

		.xingList {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 80rpx 0;
			justify-content: center;

			.item {
				margin: 0 20rpx;

				image {
					width: 64rpx;
					height: 60rpx;
				}
			}
		}

		button {
			width: 594rpx;
			height: 77rpx;
			background: #008EFF;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 77rpx;
			text-align: center;
		}
	}
</style>